<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户详情</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/viptail_cms.css" rel="stylesheet">
    <link href="css/swiper.min.css" rel="stylesheet">
</head>

<body>
    <div class="container" style="position: relative;">
        <!--===================按钮组===================-->
        <div class="row-fluid">
            <div class="btn-toolbar" role="toolbar" aria-label="...">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">返回</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#edit_user">编辑</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#edit_user_role">编辑身份</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#give_redit">赠送积分</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#give_coupon">赠送优惠券</button>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#recommend_user">推荐</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#freeze_user">冻结</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#del_user">删除</button>
                </div>
            </div>
        </div>
        <!--===================用户基本信息===================-->
        <div id="tip" class="out">* 【双击】 进入/退出 编辑模式 （可对文本进行选中，复制等操作）</div>
        <div class="swiper-container swiper-container-horizontal row-fluid">
            <div class="swiper-wrapper">
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-success">账号信息</li>
                    <li class="list-group-item" style="text-align: center;"><img style="width:60px;" src="http://viptail-dev.image.alimmdn.com/image/face/user/6674/201605201027493400D2556@!face" alt="..." class="img-circle"></li>
                    <li class="list-group-item">注册时间 <span>2016-05-19 10:13:47</span></li>
                    <li class="list-group-item">上次登录时间 <span>2015-05-18 13：00</span></li>
                    <li class="list-group-item">本月登录次数 <span>10</span></li>
                    <li class="list-group-item">积分信息 <span>19891</span></li>
                    <li class="list-group-item">邀请码 <span>kiek11</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-info">身份信息</li>
                    <li class="list-group-item">用户ID <span>6674</span></li>
                    <li class="list-group-item">昵称 <span>八疯兔</span></li>
                    <li class="list-group-item">姓名 <span>颜晓峰</span></li>
                    <li class="list-group-item">性别 <span>男</span></li>
                    <li class="list-group-item">生日 <span>1989-9-1</span></li>
                    <li class="list-group-item">身份 <span>寄养家庭</span></li>
                    <li class="list-group-item">是否推荐 <span>否</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-warning">联系信息</li>
                    <li class="list-group-item">手机 <span>18900221004</span></li>
                    <li class="list-group-item">微信 <span>kdkdk</span></li>
                    <li class="list-group-item">QQ <span>355336363</span></li>
                    <li class="list-group-item">邮箱 <span>3537551342@qq.com</span></li>
                    <li class="list-group-item">寄养地区 <span>安徽省-宣城市-郎溪县</span></li>
                    <li class="list-group-item">详细地址 <span>思明区曾厝垵西里41号凤凰假日旅馆</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item list-group-item-danger">寄养家庭信息</li>
                    <li class="list-group-item">家庭ID <span>20214</span></li>
                    <li class="list-group-item">家庭名称 <span>兔子窝</span></li>
                    <li class="list-group-item">支付宝 <span>13605014143</span></li>
                    <li class="list-group-item">寄养地区 <span>福建省-厦门市</span></li>
                    <li class="list-group-item">详细地址 <span>凤凰假日旅馆</span></li>
                    <li class="list-group-item">申请情况 <span>允许上架</span></li>
                    <li class="list-group-item">上架情况 <span>已上架</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item disabled">宠物1 <a class="edit_tag" href=""><span class="glyphicon glyphicon-edit" aria-hidden="true">编辑</span></a></li>
                    <li class="list-group-item">宠物名 <span>噜噜噜</span></li>
                    <li class="list-group-item">宠物类别 <span>大型犬</span></li>
                    <li class="list-group-item">宠物品种 <span>金毛</span></li>
                    <li class="list-group-item">性别 <span>雄性</span></li>
                    <li class="list-group-item">出生日期 <span>2015-05-18</span></li>
                    <li class="list-group-item">体重 <span>11KG</span></li>
                    <li class="list-group-item">是否绝育 <span>否</span></li>
                </ul>
                <ul class="swiper-slide list-group">
                    <li class="list-group-item disabled">宠物2 <a class="edit_tag" href=""><span class="glyphicon glyphicon-edit" aria-hidden="true">编辑</span></a></li>
                    <li class="list-group-item">宠物名 <span>嗷嗷嗷</span></li>
                    <li class="list-group-item">宠物类别 <span>小型犬</span></li>
                    <li class="list-group-item">宠物品种 <span>贵宾</span></li>
                    <li class="list-group-item">性别 <span>雌性</span></li>
                    <li class="list-group-item">出生日期 <span>2015-05-18</span></li>
                    <li class="list-group-item">体重 <span>5KG</span></li>
                    <li class="list-group-item">是否绝育 <span>是</span></li>
                </ul>
            </div>
            <div class="swiper-scrollbar"></div>
        </div>
        <!--===================用户备注===================-->
        <div class="row-fluid">
            <form class="form-search">
                <span>客服备注：</span>
                <input type="text" class="input-xxlarge search-query">
                <button class="btn btn-default" type="button">重置</button>
                <button class="btn btn-default" type="button">保存</button>
            </form>
        </div>
        <!--===================编辑身份提示框===================-->
        <div class="modal fade" id="edit_user_role">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">用户身份</label>
                            <select class="form-control">
                                <option>宠物主人</option>
                                <option>运营</option>
                                <option>客服</option>
                                <option>寄养家庭</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">说明</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================推荐用户提示框===================-->
        <div class="modal fade" id="recommend_user">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>确定要推荐该用户吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================冻结用户提示框===================-->
        <div class="modal fade" id="freeze_user">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>确定要冻结用户吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--===================冻结用户提示框===================-->
        <div class="modal fade" id="del_user">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>确定要删除该用户吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3.4,
        spaceBetween: 30,
        freeMode: true,
        grabCursor: true,
        scrollbar: '.swiper-scrollbar'
    });

    var lock = true,tip=$('#tip');
    $('.swiper-container').mouseover(function() {
        tip.removeClass('hide');
    }).mouseout(function() {
        tip.addClass('hide');
    }).dblclick(function() {
        if (lock) {
            tip.text('*【再次双击鼠标左键】 退出编辑模式');
            lock = false;
            swiper.grabCursor = false;
            swiper.detachEvents();
        } else {
            tip.text('*【双击鼠标左键】 开启编辑模式（可对文本进行选中，复制等操作）');
            lock = true;
            swiper.attachEvents();
        }
    });
    </script>
</body>

</html>
